'use client';

import { useTranslations } from 'next-intl';
import { motion } from 'framer-motion';
import Navigation from '@/components/Navigation';
import Footer from '@/components/Footer';
import Link from 'next/link';
import { useEffect } from 'react';

/**
 * Solutions Page Component
 * Displays the company's solution offerings with detailed features and advantages
 */
export default function SolutionsPage() {
  const t = useTranslations('solutions');

  useEffect(() => {
    // Handle anchor links
    const hash = window.location.hash;
    if (hash) {
      const element = document.querySelector(hash);
      if (element) {
        setTimeout(() => {
          element.scrollIntoView({ behavior: 'smooth' });
        }, 100);
      }
    }
  }, []);

  const fadeInUp = {
    initial: { opacity: 0, y: 20 },
    animate: { opacity: 1, y: 0 },
    transition: { duration: 0.6 },
  };

  const staggerContainer = {
    animate: {
      transition: {
        staggerChildren: 0.1,
      },
    },
  };

  return (
    <div className="min-h-screen bg-gradient-to-b from-gray-50 to-white">
      <Navigation />

      {/* Hero Section */}
      <section className="pt-32 pb-20 relative overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-br from-gray-50 via-white to-blue-50"></div>
        <div className="absolute top-0 left-0 w-full h-full">
          <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-gradient-to-br from-blue-300 to-blue-100 rounded-full mix-blend-multiply filter blur-3xl opacity-40 animate-blob"></div>
          <div className="absolute top-1/3 right-1/4 w-96 h-96 bg-gradient-to-br from-purple-300 to-purple-100 rounded-full mix-blend-multiply filter blur-3xl opacity-40 animate-blob animation-delay-2000"></div>
          <div className="absolute bottom-1/4 left-1/2 w-96 h-96 bg-gradient-to-br from-indigo-300 to-indigo-100 rounded-full mix-blend-multiply filter blur-3xl opacity-40 animate-blob animation-delay-4000"></div>
        </div>
        
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <motion.div
            initial="initial"
            animate="animate"
            variants={staggerContainer}
            className="text-center"
          >
            <motion.div 
              variants={fadeInUp}
              className="inline-flex items-center justify-center w-[260px] h-[50px] bg-gradient-to-r from-blue-600/10 to-purple-600/10 rounded-full border border-blue-200/50 mb-8"
            >
              <span className="text-base font-semibold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
                ✨ {t('subtitle')}
              </span>
            </motion.div>
            
            <motion.h1
              variants={fadeInUp}
              className="text-5xl md:text-6xl font-bold text-gray-900 mb-6"
            >
              <span className="bg-gradient-to-r from-blue-600 via-purple-600 to-indigo-600 bg-clip-text text-transparent">
                {t('title')}
              </span>
            </motion.h1>
            <motion.p variants={fadeInUp} className="text-xl md:text-2xl text-gray-600 max-w-3xl mx-auto leading-relaxed">
              {t('subtitle')}
            </motion.p>
          </motion.div>
        </div>
      </section>

      {/* Bike Solution */}
      <section id="bike" className="section-padding scroll-mt-20">
        <div className="max-w-7xl mx-auto">
          <motion.div
            initial="initial"
            whileInView="animate"
            viewport={{ once: true }}
            variants={staggerContainer}
          >
            {/* Title */}
            <motion.div variants={fadeInUp} className="text-center mb-16">
              <div className="inline-flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-blue-600/10 to-purple-600/10 backdrop-blur-sm text-blue-700 rounded-full text-sm font-semibold border border-blue-200/30 mb-6">
                <span className="w-2 h-2 bg-blue-600 rounded-full animate-pulse"></span>
                智能解决方案
              </div>
              <div className="inline-block px-6 py-2 bg-gradient-to-r from-blue-500 to-indigo-600 text-white rounded-full text-sm font-semibold mb-6">
                {t('bike.title')}
              </div>
              <motion.h2 variants={fadeInUp} className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
                两轮车智能<span className="bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent">升级方案</span>
              </motion.h2>
              <motion.p variants={fadeInUp} className="text-xl text-gray-600 max-w-3xl mx-auto">
                为电动车、摩托车提供智能化升级，实现远程控制、定位追踪、数据分析等功能
              </motion.p>
            </motion.div>

            <div className="grid lg:grid-cols-2 gap-12 items-center mb-16">
              <motion.div
                variants={fadeInUp}
                className="order-2 lg:order-1"
              >
                <div className="relative">
                  <div className="absolute -inset-4 bg-gradient-to-r from-blue-500 to-indigo-600 rounded-3xl blur-xl opacity-20"></div>
                  <div className="relative bg-gradient-to-br from-white to-blue-50 rounded-3xl p-8 shadow-xl border border-gray-100">
                    <h3 className="text-2xl md:text-3xl font-bold text-gray-900 mb-6">
                      🎯 方案亮点
                    </h3>
                    <div className="space-y-4">
                      {[
                        '远程控制 - 手机一键启动/熄火',
                        '实时定位 - GPS/北斗双模定位',
                        '智能防盗 - 异动报警，轨迹追踪',
                        '数据分析 - 行驶里程、电池健康监测',
                        'OTA升级 - 远程固件更新'
                      ].map((feature, index) => (
                        <div key={index} className="flex items-start space-x-3">
                          <div className="flex-shrink-0 w-6 h-6 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center mt-0.5">
                            <svg className="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
                              <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                            </svg>
                          </div>
                          <p className="text-gray-700">{feature}</p>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </motion.div>

              <motion.div
                variants={fadeInUp}
                className="order-1 lg:order-2"
              >
                <div className="relative">
                  <div className="absolute inset-0 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-3xl blur-2xl opacity-20"></div>
                  <div className="relative aspect-square rounded-3xl bg-gradient-to-br from-blue-100 to-indigo-100 flex items-center justify-center overflow-hidden">
                    <div className="text-9xl">🏍️</div>
                  </div>
                </div>
              </motion.div>
            </div>

            {/* Advantages */}
            <motion.div variants={fadeInUp} className="mb-12">
              <h3 className="text-3xl font-bold text-gray-900 mb-10 text-center">
                方案<span className="bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent">优势</span>
              </h3>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                {[
                  {
                    title: '模块化设计',
                    description: '易于集成，快速部署',
                    icon: '⚙️'
                  },
                  {
                    title: '低功耗',
                    description: '超长待机，节能环保',
                    icon: '🔋'
                  },
                  {
                    title: '稳定可靠',
                    description: '经过市场验证，值得信赖',
                    icon: '🛡️'
                  }
                ].map((advantage, index) => (
                  <motion.div
                    key={index}
                    variants={fadeInUp}
                    whileHover={{ y: -10 }}
                    className="bg-gradient-to-br from-white to-blue-50 rounded-3xl p-8 shadow-lg border border-gray-100 hover:shadow-xl transition-all duration-300"
                  >
                    <div className="text-5xl mb-6">{advantage.icon}</div>
                    <h4 className="text-xl font-bold text-gray-900 mb-3">{advantage.title}</h4>
                    <p className="text-gray-600">{advantage.description}</p>
                  </motion.div>
                ))}
              </div>
            </motion.div>
          </motion.div>
        </div>
      </section>

      {/* Door Solution */}
      <section id="door" className="section-padding bg-gradient-to-br from-gray-50 to-white scroll-mt-20">
        <div className="max-w-7xl mx-auto">
          <motion.div
            initial="initial"
            whileInView="animate"
            viewport={{ once: true }}
            variants={staggerContainer}
          >
            {/* Title */}
            <motion.div variants={fadeInUp} className="text-center mb-16">
              <div className="inline-flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-purple-600/10 to-pink-600/10 backdrop-blur-sm text-purple-700 rounded-full text-sm font-semibold border border-purple-200/30 mb-6">
                <span className="w-2 h-2 bg-purple-600 rounded-full animate-pulse"></span>
                智能解决方案
              </div>
              <div className="inline-block px-6 py-2 bg-gradient-to-r from-purple-500 to-pink-600 text-white rounded-full text-sm font-semibold mb-6">
                {t('door.title')}
              </div>
              <motion.h2 variants={fadeInUp} className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
                智能门控<span className="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">升级方案</span>
              </motion.h2>
              <motion.p variants={fadeInUp} className="text-xl text-gray-600 max-w-3xl mx-auto">
                传统门禁系统智能化改造，支持多种开门方式，提升安全性和便利性
              </motion.p>
            </motion.div>

            <div className="grid lg:grid-cols-2 gap-12 items-center mb-16">
              <motion.div
                variants={fadeInUp}
                className="order-2"
              >
                <div className="relative">
                  <div className="absolute -inset-4 bg-gradient-to-r from-purple-500 to-pink-600 rounded-3xl blur-xl opacity-20"></div>
                  <div className="relative bg-gradient-to-br from-white to-purple-50 rounded-3xl p-8 shadow-xl border border-gray-100">
                    <h3 className="text-2xl md:text-3xl font-bold text-gray-900 mb-6">
                      🎯 核心功能
                    </h3>
                    <div className="space-y-4">
                      {[
                        '多种开门方式 - 手机、指纹、密码、卡片',
                        '远程授权 - 为访客临时开门权限',
                        '开门记录 - 完整的出入日志',
                        '联网管理 - 多门统一管理',
                        '紧急开门 - 断网断电也能开'
                      ].map((feature, index) => (
                        <div key={index} className="flex items-start space-x-3">
                          <div className="flex-shrink-0 w-6 h-6 rounded-full bg-gradient-to-br from-purple-500 to-pink-600 flex items-center justify-center mt-0.5">
                            <svg className="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
                              <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                            </svg>
                          </div>
                          <p className="text-gray-700">{feature}</p>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </motion.div>

              <motion.div
                variants={fadeInUp}
                className="order-1"
              >
                <div className="relative">
                  <div className="absolute inset-0 bg-gradient-to-br from-purple-500 to-pink-600 rounded-3xl blur-2xl opacity-20"></div>
                  <div className="relative aspect-square rounded-3xl bg-gradient-to-br from-purple-100 to-pink-100 flex items-center justify-center overflow-hidden">
                    <div className="text-9xl">🚪</div>
                  </div>
                </div>
              </motion.div>
            </div>

            {/* Advantages */}
            <motion.div variants={fadeInUp}>
              <h3 className="text-3xl font-bold text-gray-900 mb-10 text-center">
                方案<span className="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">优势</span>
              </h3>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                {[
                  {
                    title: '兼容性强',
                    description: '适配多种门禁系统',
                    icon: '🔌'
                  },
                  {
                    title: '安装简便',
                    description: '无需破坏原有结构',
                    icon: '🛠️'
                  },
                  {
                    title: '安全可靠',
                    description: '多重加密保护',
                    icon: '🔒'
                  }
                ].map((advantage, index) => (
                  <motion.div
                    key={index}
                    variants={fadeInUp}
                    whileHover={{ y: -10 }}
                    className="bg-gradient-to-br from-white to-purple-50 rounded-3xl p-8 shadow-lg border border-gray-100 hover:shadow-xl transition-all duration-300"
                  >
                    <div className="text-5xl mb-6">{advantage.icon}</div>
                    <h4 className="text-xl font-bold text-gray-900 mb-3">{advantage.title}</h4>
                    <p className="text-gray-600">{advantage.description}</p>
                  </motion.div>
                ))}
              </div>
            </motion.div>
          </motion.div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="section-padding bg-gradient-to-br from-blue-600 via-purple-600 to-indigo-600 relative overflow-hidden">
        <div className="absolute inset-0 bg-[url('')]"></div>
        <div className="relative z-10 max-w-4xl mx-auto text-center">
          <motion.div
            initial="initial"
            whileInView="animate"
            viewport={{ once: true }}
            variants={staggerContainer}
          >
            <motion.h2
              variants={fadeInUp}
              className="text-4xl md:text-5xl font-bold text-white mb-6"
            >
              选择适合您的<span className="bg-gradient-to-r from-blue-300 to-purple-300 bg-clip-text text-transparent">解决方案</span>
            </motion.h2>
            <motion.p variants={fadeInUp} className="text-xl text-white/90 mb-8 max-w-2xl mx-auto">
              联系我们，获取详细的产品资料和定制化方案
            </motion.p>
            <motion.div variants={fadeInUp}>
              <Link
                href="/contact"
                className="inline-flex items-center gap-3 px-8 py-4 bg-white text-blue-600 font-semibold rounded-full hover:bg-gray-100 transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-xl"
              >
                <span>立即咨询</span>
                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
                </svg>
              </Link>
            </motion.div>
          </motion.div>
        </div>
      </section>

      <Footer />
    </div>
  );
}